<template>
	<div class="MapLayerPoint-Nld" :style="{ left: left + 'px', top: top + 'px' }">
		<div 
			class="point" 
			:class="getStatusClass(itemData.status)">
		</div>

		<div class="str">涝</div>
	</div>
</template>

<script>
export default {
	props: {
		left: {
			type: Number,
			default: 0,
		},
		top: {
			type: Number,
			default: 0,
		},
		itemData: {
			type: Object,
			default: () => ({}),
		}
	},
	methods: {
		getStatusClass(status) {
			switch (status) {
				case '水位正常':
					return 'status-normal';
				case '水位延迟':
					return 'status-delay';
				case '水位缺失':
				case '水位离线':
					return 'status-missing animated-point';
			}
		}
	}
}
</script>

<style scoped lang="scss">
@import '@/common/scss/color.scss';

.MapLayerPoint-Nld {
	position: absolute;
	transform: translate3D(-50%, -50%, 0);
	z-index: 10;
	.point {
		width: 12px;
		height: 12px;
		border-radius: 50%;
		cursor: pointer;
		box-shadow: 0 0 0 4px rgba(59, 130, 210, 0.3);
		transition: all 0.3s ease;
		position: relative;
		
		&.status-normal {
			background-color: $Color-success;
			box-shadow: 0 0 0 4px rgba($Color-success, 0.3);
		}
		
		&.status-missing {
			background-color: $Color-danger;
			box-shadow: 0 0 0 4px rgba($Color-danger, 0.3);
		}
		
		&.status-delay {
			background-color: $Color-warning;
			box-shadow: 0 0 0 4px rgba($Color-warning, 0.3);
		}
		
		&.animated-point {
			animation: pulse-animation 1.5s infinite;
		}
	}
	.str {
		position: absolute;
		left: 0;
		top: 0;
		font-size: 12px;
		color: white;
		line-height: 11px;
		cursor: pointer;
		transform: scale(0.8);
	}

	&:hover {
		.point {
			transform: scale(1.2);
		}
		.status-normal {
			box-shadow: 0 0 0 6px rgba($Color-success, 0.5);
		}

		.status-missing {
			box-shadow: 0 0 0 6px rgba($Color-danger, 0.5);
		}
		
		&.status-delay {
			box-shadow: 0 0 0 6px rgba($Color-warning, 0.5);
		}
	}
}
	
	@keyframes pulse-animation {
		0% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.4);
		}
		100% {
			transform: scale(1);
		}
	}
</style>